<template lang="pug">
  .global-container
    .global-container-header
      .title 个人中心
    .global-container-content.global-container-operate
      .operate-content
        .operate-content-body.view-operate-content-body
          .operate-content-header 基础信息
          .flex-row
            .left-header
              | 头像:
            img.img(:src="$utils.imgPath(userInfo.headingUrl)")
          .flex-row
            .left-header
              | 用户名:
            | {{userInfo.userName}}
          .flex-row
            .left-header
              | 邮箱:
            | {{userInfo.userEmail}}
          .flex-row
            .left-header
              | 手机号:
            | {{userInfo.userPhone || '--'}}
          .flex-row
            .left-header
              | 性别:
            | {{userInfo.userSex === '1' ? '男' : userInfo.userSex === '2' ? '女' : '--'}}
          .flex-row
            .left-header
              | 生日:
            | {{userInfo.userBirth ? moment(userInfo.userBirth).format('YYYY-MM-DD') : '--'}}
          .flex-row
            .left-header
              | 简介:
            | {{userInfo.userAutograph || '--'}}
      .operate-btn
        .btn-no-margin.btn-save(@click="$router.push('/edit-personal')") 修改信息
</template>

<script>
import {get} from '@utils/util'
import moment from 'moment'
export default {
  data () {
    return {
      moment
    }
  },
  computed: {
    userInfo: get('base/userInfo')
  }
}
</script>

<style scoped lang="stylus">
  .img
    width 80px
    height 80px
</style>
